<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>STORE</title>
    <script src="../static/js/jquery.min.js" charset="utf-8"></script>
    <script src="../static/js/bootstrap.min.js" charset="utf-8"></script>
    <script src="../static/vue/vue.min.js"></script>
    <script src="../static/vue/vue-tables-2.min.js"></script>


    <link rel="stylesheet" href="../static/css/bootstrap.min.css">

    <style media="screen">
      .margin-top-5{margin-top: 5px;}
    </style>

  </head>
  <body>
    <div class="container-fluid" id="master-page">

      <!-- tab head -->
      <ul class="nav nav-tabs">
        <li class="active"><a href="#Pool" data-toggle="tab" @click="getPoolList()"><h2>交易市场</h2></a></li>
        <li><a href="#Pending" data-toggle="tab" @click="getPendingList()"><h2>已接单</h2></a></li>
        <!-- <li><a href="#Archive" data-toggle="tab" ><h2></h2></a></li> -->
        <li><a href="#Closed" data-toggle="tab" @click="getClosedList()"><h2>已成交</h2></a></li>
        <h1 class="pull-right">{{store.name}}</h1>
      </ul>
      <div class="tab-content">
        <div class="tab-pane fade margin-top-5 in active" id="Pool">
          <v-client-table :columns="columns.pool" :data="lines.pool" :options="options">
              <div slot="medicine_name" slot-scope="props">{{medicine[props.row.medicine_name]}} - {{props.row.medicine_name}}</div>
              <div slot="ishandled" slot-scope="props"><button class="btn btn-block btn-sm btn-success" v-on:click="handle(props.row)" v-bind:disabled="props.row.ishandled!=0"><span class="glyphicon glyphicon-plus" v-show="props.row.ishandled==0"> 接单</span><span class="glyphicon glyphicon-ok" v-show="props.row.ishandled!=0"></span></button></div>
          </v-client-table>
        </div>
        <div class="tab-pane fade margin-top-5" id="Pending">
          <v-client-table :columns="columns.pending" :data="lines.pending" :options="options">
              <div slot="medicine_name" slot-scope="props">{{medicine[props.row.medicine_name]}} - {{props.row.medicine_name}}</div>
              <div slot="ishandled" slot-scope="props"><button class="btn btn-block btn-sm btn-success" v-bind:disabled="props.row.ishandled==3"><span class="glyphicon glyphicon-plus" v-show="props.row.ishandled==3"> 抢到</span><span class="glyphicon glyphicon-ok" v-show="props.row.ishandled!=3"></span></button></div>
          </v-client-table>
        </div>
        <div class="tab-pane fade margin-top-5" id="Archive">
        </div>
        <div class="tab-pane fade margin-top-5" id="Closed">
            <v-client-table :columns="columns.closed" :data="lines.closed" :options="options">
                <div slot="medicine_name" slot-scope="props">{{medicine[props.row.medicine_name]}} - {{props.row.medicine_name}}</div>
                <div slot="ishandled" slot-scope="props"><button class="btn btn-block btn-sm btn-success" v-bind:disabled="props.row.ishandled!=1"><span class="glyphicon glyphicon-plus" v-show="props.row.ishandled==2"> 被抢</span><span class="glyphicon glyphicon-ok" v-show="props.row.ishandled!=2"></span></button></div>
            </v-client-table>
        </div>
      </div>

  </body>

  <!-- map for  chinese name -->
  <script src="../static/info/map.js" charset="utf-8"></script>
  <!-- vue -->
  <script>

  // var ServerIP = window.location.host
  var ServerIP = "172.20.10.8:"+window.location.port
  Vue.use(VueTables.ClientTable);
  var app = new Vue({
  	el: '#master-page',
  	data: function(){
  		return {
    		medicine: medicine,
        storeID: 1,
  			store: {
          name: "吉星大药房",
          sid: "10086",
          type: 1,
          site: "邯郸路220号",
        },
        new_deal:{
          prescription_ID: "",
          medicine_name: "",
          amount: 0,
          ts: 0,
          site: "邯郸路220号",
          price: 0.00,
        },
        columns:{
          pool:["patient_id", "presciption_id", "medicine_name","amount","_ts","site","price","ishandled",],
          pending:["patient_id", "presciption_id", "medicine_name","amount","_ts","site","price","ishandled",],
          closed:["patient_id", "presciption_id", "medicine_name","amount","_ts","site","price","ishandled",],
        },
        lines:{
          pool:[],
          pending:[],
          archive:[],
          closed:[],
        },
        options: {
  				headings: {
  					patient_id: "病人ID", //
  					presciption_id: "处方ID", //
  					medicine_name: "药名", //
  					amount: "剂量", //
  					_ts: "时间", //
  					site: "药店地址", //
  					price: "总价", //
  					ishandled: "状态", //
  				},
  				sortable: ["patient_id", "presciption_id", "medicine_name","amount","site","price","ishandled","_ts",],
  				filterable: ["xxx"],
          orderBy: { ascending:false, column:"_ts", }
  			},
        pool_list:[],
        drug_list:[],
        prescription_list:[],
        pending_list:[],
        closed_list:[],
        new_archive:{
          prescription_ID: "",
          medicine_name: "",
          amount: 0,
          ts: 0,
          site: "邯郸路220号",
          price: 0.00,
        },
        new_drug:{
          name:"",
          chemistry_name:"",
          qty: 0,
          remark: "",
          usage: "",
          amount: "",
        },
  		}
  	},
  	methods: {
  		func: function(){
  			var _this = this;
  			var postData = {};
  			postData["receiver"] = 999;
  			console.log(postData)
  			$.post("...",postData,function(data,status){
  				if (status=="success") {
  					console.log(data)
  				}else{alert("Error!Code: "+status);}
  			});
  			return;
  		},
  		handle: function(row){
  			var _this = this;
  			var postData = {};
        postData["patient_id"] = row["patient_id"]
        postData.data = {}
        postData.data.presciption_id = row["presciption_id"]
        postData.data.medicine_name = row["medicine_name"]
        postData.data.amount = row["amount"]
        postData.data.ts = row["ts"]
        postData.data.site = row["site"]
        postData.data.price = row["price"]
        postData["ishandled"] = 1

        console.log(postData);
        console.log("http://"+ ServerIP + "/sethandle"+_this.storeID);

        $.ajax({
          type: 'POST',
          url: "http://"+ ServerIP + "/sethandle"+window.location.port,
          data: JSON.stringify(postData),
          success: function(result){
            if (result==200) {
                console.log("xxxxxxx");
                _this.lines.pool[row.key].ishandled = 1
            }
          },
          dataType: "json"
        });
  		},
      getPoolList: function(){
        var _this = this;
        _this.lines.pool = []
        _this.lines.pending = []
        _this.lines.closed = []

  			$.post("http://"+ ServerIP + "/getprelist"+window.location.port,{},function(data,status){
  				if (status=="success") {
            var objs = eval(data)
            console.log(objs);
            if (objs==null) {return}

            var cnt_pending = 0
            var cnt_pool = 0
            var cnt_closed = 0
            $.each(objs, function(k,v){
                var tmp = {}
                tmp["patient_id"] = v.patient_id
                tmp["presciption_id"] = v.data.presciption_id
                tmp["medicine_name"] = v.data.medicine_name
                tmp["amount"] = v.data.amount
                tmp["_ts"] = (new Date(v.data.ts*1000)).toLocaleString()
                tmp["ts"] = v.data.ts
                tmp["site"] = v.data.site
                tmp["price"] = v.data.price
                tmp["ishandled"] = v.ishandled

                if (v.ishandled==3) {
                  tmp["key"] = cnt_pending++
                  _this.lines.pending.push(tmp)
                }else if (v.ishandled<2){
                  tmp["key"] = cnt_pool++
                  _this.lines.pool.push(tmp)
                }else if (v.ishandled==2){
                  tmp["key"] = cnt_closed++
                  _this.lines.closed.push(tmp)
                }
            });
  				}else{alert("Error!Code: "+status);}
  			});

        return 0
  		},
      getPendingList: function(){
        return 0
  		},
      getClosedList: function(){
        return 0
  		},
      getDrugList: function(){
        return 0
  		},
      getPort: function(){
        if (location.port=="8881") { this.storeID = 1  }
        if (location.port=="8882") { this.storeID = 2  }
        if (location.port=="8883") { this.storeID = 3  }
  		},
      checkStore: function(){
        if (this.storeID==1) {
          this.store = {
            name: "药店A - 吉星大药房",
            sid: "10086",
            type: 1,
            site: "邯郸路220号",
          }
        }else if(this.storeID==2){
          this.store = {
            name: "药店B - 如意小药店",
            sid: "10010",
            type: 1,
            site: "闵大荒",
          }
        }else{
          this.store = {
            name: "药店C - 亮亮连锁药店",
            sid: "66666",
            type: 1,
            site: "杨浦区",
          }
        }
  		},
  	},
  	computed: {
  	},
  	created(){
  		this.getPort();
  		this.checkStore();
  		this.getPoolList();
  	}
  });
  </script>
</html>
